<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{
            display: block;
            margin: 0 auto;
            background-color: #33cc99;
        }
    </style>
</head>
<body>
<canvas width="600" height="600" id="huabu"></canvas>
<script>
    //1.获取画布对象
    //2.获取画图工具
    //3.从画图工具中取出要使用的工具
    //4.找位置
    //5.绘制
     var huabu =document.getElementById('huabu');
     var tools = huabu.getContext('2d');

    //食物的默认位置
    var x = Math.floor(Math.random()*20)*30;
    var y = Math.floor(Math.random()*20)*30;

    var directionX=1;
    var directionY=0;
    //判断游戏是否结束
    var isGameover=false;
//    添加一个标记，标记食物有没有被吃
    var isEated = false;
//蛇的默认位置
    //    把坐标存入数组
    var snake=[{x:3,y:0},{x:2,y:0},{x:1,y:0}];
    document.addEventListener('keydown',function(event){
        if(event.keyCode==38){
            directionX=0;
            directionY=-1;
        }else if(event.keyCode==40){
            directionX=0;
            directionY=1;
        }else if(event.keyCode==37){
            directionX=-1;
            directionY=0;
        }else if(event.keyCode==39){
            directionX=1;
            directionY=0;
        }
    });

    //设置定时器
    setInterval(function(){//不断进行重绘，擦除
        if(isGameover){
            return;//return后就不执行后面代码
        }
        //擦除画布
        tools.clearRect(0,0,600,600);
        //        贪吃蛇重绘，擦除
        /*方向
         * 1.向右：x+1,y不变
         * 2.向上：y-1,x不变*/
        var oldHead=snake[0];
        var newHead={
            x:oldHead.x+directionX,
            y:oldHead.y+directionY
        };
        //游戏结束的判定：
        //如果蛇头y的坐标比0还小,说明超出地图
        if(newHead.y<0 || newHead.x<0 || newHead.x*30>=600 || newHead.y*30>=600){
            isGameover=true;
        }else{
            //游戏正常运行，没有结束
            snake.unshift(newHead);
            //蛇吃食物，坐标重合时
            if(snake[0].x*30==x && snake[0].y*30==y){
                //蛇吃掉食物，就不执行pop，也就相当于不删除最后一节，也就表示增加长度
                //isEated=true;表示食物被吃掉，此时重新生成一个食物
                isEated=true;
            }else{
                //重新设置状态
                isEated=false;
                //表示蛇没有吃掉食物就删除最后一节
                snake.pop();
            }
        }


        <!--绘制矩形（食物）开始-->
//        1.食物有默认位置，在吃掉之前不会动
//        2.只有被吃掉了才会重新生成
        if(isEated){
            x = Math.floor(Math.random()*20)*30;
            y = Math.floor(Math.random()*20)*30;
        }
        tools.fillStyle='#cccc00';
        tools.fillRect(x,y,30,30);
        <!--绘制矩形结束-->

        <!--绘制贪吃蛇开始-->
        //    绘制蛇头
        for(i=0;i<snake.length;i++){
            if(i==0){
                tools.fillStyle='#ff0033';
            }else{
                tools.fillStyle='#333399';
            }
            tools.fillRect(snake[i].x*30,snake[i].y*30,30,30);
        }

        <!--绘制贪吃蛇结束-->

        <!--绘制地图开始-->
        //本来绘制地图是在绘制矩形之前，因为画图有先后顺序，绘制矩形放后面会压住地图网格线
        for(var i =1;i<20;i++){
            tools.moveTo(0,30*i+0.5);
            tools.lineTo(600,30*i+0.5);
        }
        //绘制垂直线
        for(var j =1;j<20;j++){
            tools.moveTo(30*j+0.5,0);
            tools.lineTo(30*j+0.5,600);
        }
        tools.strokeStyle='white';
        tools.stroke();
        <!--绘制地图结束-->

            },1000/3);

    <!--结束-->



</script>
</body>
</html>